<template>
    <div class="moduleManage">
        <!-- <div class="tip">
            <i class="iconfont icon-tishi"></i>
            <span class="tip_text">提示：模块管理关联到所有详情页面的字段，删除后，此字段内信息也将会被删除，若非必须，禁止删除。</span>
        </div> -->
        <div class="module">
            <div class="module_item" v-for="(item,index) in moduleList" :key="index" :style="{'background': item.color}">
                <div class="module_item_icon">
                    <i :class="item.icon"></i>
                </div>
                <div class="module_item_title">
                    {{item.describe}}
                </div>
                <div class="module_item_btn">
                    <el-button size="small" round @click="goToUrl('moduleGroup',{'code':item.code,'id': item.id,'name': item.name})">字段组管理</el-button>
                    <el-button  size="small" round @click="goToUrl('moduleFields',{'code':item.code,'id': item.id,'name': item.name})">查看字段列表</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import http from '@/api/module'
export default {
    name: 'moduleManage',
    data() {
        return {
            moduleList : []
        }
    },
    methods: {
        getListData(){
            http.getList().then(res => {
                this.moduleList = res.data;
            })
        },
        goToUrl(name,params){
            this.$router.push({name, params});
        }
    },
    created(){
        this.getListData();
    }
}
</script>

<style lang="scss" scoped>
.moduleManage{
    height: 100%;
    padding: 28px 40px;
    box-sizing: border-box;
    overflow: auto;
    &::-webkit-scrollbar {
        width: 6px;
        height: 6px;
        cursor: pointer;
        background: #f1f1f1;
    }

    &::-moz-scrollbar {
        display: none;
    }
    &::-ms-scrollbar {
        display: none;
    }
    &::-o-scrollbar {
        display: none;
    }

    &::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 10px;
        width: 10px;
        cursor: pointer;
        background: #bbb;
    }
    &::-webkit-scrollbar-track {/*滚动条里面轨道*/
        border-radius: 0px;
        background: #f1f1f1;
    }
    .tip{
        width: 100%;
        background:rgba(255,240,217,1);
        border-radius:10px;
        margin-bottom: 40px;
        padding: 14px 40px;
        box-sizing: border-box;
        &>i{
            color: #D81E06;
            margin-right: 13px;
        }
        &_text{
            font-size:18px;
            font-family:PingFang SC;
            font-weight:500;
            color:rgba(100,61,0,1);
            line-height:38px;
        }
    }
    .module{
        display: flex;
        flex-wrap: wrap;
        &_item{
            width: 330px;
            height: 216px;
            border-radius: 8px;
            background: #2FA0EA;
            color: #fff;
            margin-right: 40px;
            margin-bottom: 40px;
            padding: 40px 30px 0px;
            box-sizing: border-box;
            &_icon{
                text-align: center;
                &>i{
                    font-size: 42px;    
                }
            }
            &_title{
                font-size: 20px;
                line-height: 40px;
                text-align: center;
                margin-bottom: 20px;
            }
            &_btn{
                display: flex;
                justify-content: space-between;
                .el-button{
                    background: none;
                    color: #fff;
                    border:1px solid rgba(255,255,255,0.3);
                    width: 125px;
                    &:hover{
                        background: #59bbef;
                    }
                }
            }
        }
    }
}
</style>